<template>
    <div class="fillcontain">
        <el-form :model="formData"  inline="true" ref="formData"
                 class="demo-form-inline" labelWidth="80px" style="margin-left: 5px;margin-top: 20px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="赠品名称">
                        <el-input
                            size="mini"
                            placeholder="赠品名称"
                            v-model="formData.name">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="赠品兑换积分">
                        <el-input-number size="mini" v-model="formData.score" :min="1"
                                         label="兑换积分"></el-input-number>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="备注">
                        <el-input size="mini" v-model="formData.comments" :min="1"
                                         label="备注"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :offset="8">
                    <el-button size="mini" type="primary" icon="el-icon-search" @click="submitForm('add')">提交</el-button>
                </el-col>
            </el-row>
        </el-form>

        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                style="width: 100%">

                <el-table-column
                    property="id"
                    label="排序编号"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="name"
                    label="赠品名称"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="score"
                    label="兑换积分"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="createtime"
                    label="创建时间"
                    :formatter="dateFormat"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button @click="deleteThis(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
    import {mapActions, mapState, mapGetters} from 'vuex'
    import {queryGift, addGift,deleteGift} from '@/api/getData'
    import * as moment from 'moment'
    import ElForm from "../../node_modules/element-ui/packages/form/src/form.vue";

    export default {
        data() {
            return {
                loading:false,
                formData: {
                    name: "",
                    special:1,
                    schoolid:''
                },
                updatedata: {
                    giftname: '',
                    gitnum: null,
                    schooid: null,

                },
                tableData: [],
                dialogFormVisible: false,
                value: '',
                formData: {
                    name: '',
                    unit: null,
                    special: null,
                    schoolid: null,
                    comments: '',
                },
                offset: 0,
                limit: 10,
                count: 0,
                currentPage: 1,
            }
        }
        ,
        created() {
            //this.giftList();
        },
        mounted() {
            this.initData();
        }
        ,
        components: {
            ElForm,
            headTop,

        },

        methods: {
            dateFormat: function (row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },
            print(row) {

            },

            async initData() {
                const v = await queryGift({"data": {"pageno": this.currentPage, "pagesize": this.limit}});
                this.tableData = [];
                var list = v.data.values;
                this.count = v.data.totalCount;
                list.forEach(item => {
                    const tableData = {};
                    tableData.id = item.id;
                    tableData.score=item.score;
                    tableData.createtime=item.createtime;
                    tableData.name = item.name;
                    this.tableData.push(tableData);
                })
            },
            async deleteThis(a, row) {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.confirmdelete(row);
                });
            },
            async confirmdelete(row) {
                var data = {"data": {"id": row.id}}
                await deleteGift(data)
                this.initData();
                this.$message({
                    type: 'success',
                    message: '删除成功'
                });
            },

            async submitForm(formName) {
                try {
                    var data = {"data": this.formData}
                    let result = await addGift(data);
                    if (result.success == true) {
                        this.initData();
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.formData = {}
                    }
                } catch (err) {
                    console.log(err);
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initData()
            },
        }
        ,
        computed: {
            ...
                mapGetters(['schoolList'])
        }
        ,
    }

</script>
<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }

    .el-form-item__label {
        width: 120px;
        text-align: right;
    }

    .center {
        display: block;
        margin: 0 auto;
        width: 100px;
    }

    .editbutton {
        padding-top: 3px;
        padding-right: 5px;
        padding-bottom: 3px;
        padding-left: 5px;
    }
</style>
